<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>position</title>
    <style>
        .box{
            height:  500px;
            width:  500px;
            background-color: blueviolet;
            position: relative;
            /*position: relative相对定位  */
            /* 默认是 position: static */
            /* 默认不脱离文档流 */
            /* 定位的话，就是脱离了文档流 */
            /* z-index: -9999; */
            /* 设置元素的层级 */
        }
        .pos{
            /* position: absolute表示绝对定位，一般和 相对定位配合使用 */
            /* height:  200px; */
            /* width: 200px; */
            height: 600px;
            width: 600px;
            background-color: aquamarine;
            position: absolute;
           top: 50%;
           left: 50%;
           margin-top: -100px;
           margin-left: -100px;
           clip: rect(100px, 200px, 200px, 100px);
           /* 	设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left) */
           /* 如果图像大于包含它的元素，会发生什么？-clip属性，让你指定一个绝对定位的元素，
           该尺寸应该是可见的，该元素被剪裁成这种形状并显示。 */
           /* 注意：: 如果先有"overflow：visible"，clip属性不起作用。 */
           /* z-index: 1000000; */
           /*  z-index 仅能使用在进行定位元素(position:absolute, position:relative, or position:fixed)中。 */
        }
        .fixed{
            /* 固定定位 */
            /* 相对于浏览器窗口进行定位 */
            position: fixed;
            top: 0;
            right: 0;
        }
        .sticky{
            /* 	粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative;
             而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。 */
             position: sticky;
             /* top: 0;
             right: 0; */
             left:  100px;
             /* top: 1000px; */
             /* 当超过一定的高度的时候，就会固定在浏览器的某一个位置，此时就会像 position: fixed 固定定位 */
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="pos"></div>
    </div>
    <span class="fixed">
        我是fixed定位
    </span>

    <span class="sticky">
        我是sticky定位
    </span>
</body>
</html>